<!--  -->
<template>
  <div class='' style="padding:20px">
    <div style="margin-bottom:30px">
      课程名称
      <el-input v-model="courseName" placeholder="课程名称" style="width:300px;margin-right:20px" clearable></el-input>
      课程方向
      <el-select v-model="courseType" placeholder="课程方向" style="" clearable>
        <el-option v-for="opt in courseTypeList" :key="opt.type" :label="opt.name" :value="opt.type" />
      </el-select>
      <el-button type="primary" @click="getPage">查询</el-button>
      <el-button type="" @click="clearContent">重置</el-button>
    </div>
    <commonRescource :list='dataList' @clickDetail='getDetail' @clickResource='getResource'></commonRescource>
    <el-pagination class="pageBar" background @size-change="sizeChange" @current-change="currentChange" :current-page="pageInfo.currentPage" :page-sizes="[2, 5,10, 20, 30]" :page-size="pageInfo.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalRecordCount">
    </el-pagination>
  </div>
</template>

<script>
import teacherApi from "../api/teacher.service.js";
import studentApi from "../api/student.service.js";
import commonRescource from './commonRescource';

export default {
  components: {commonRescource},
  data() {
    return {
      courseName: "",
      courseType: "",
      courseTypeList: [],
      pageInfo: {
        currentPage: 1,
        pageSize: 10,
      },
      totalRecordCount: "",
      dataList: [],
      host: window.location.href.split("/#/")[0] + "/api",
    };
  },
  mounted() {
    this.getPage();
    this.getCourseTypes();
  },
  computed: {},
  watch: {},
  methods: {
    async getPage() {
      let { data } = await studentApi.courseStudent({
        courseType: this.courseType,
        courseName: this.courseName,
        ...this.pageInfo,
      });
      this.dataList = data.records;
      this.totalRecordCount = data.totalRecordCount;
    },
    async getCourseTypes() {
      let { data } = await teacherApi.getCourseTypes();
      this.courseTypeList = data;
    },
    clearContent() {
      this.courseType = "";
      this.courseName = "";
    },
    // 获取详情
    async getDetail(data) {
      this.$router.push({
        path: "/courseDetail",
        query: {
          id: data.id,
          originPath: "/exper/views/student/myCourse",
        },
      });
      // let data = await teacherApi.getDetail({ id });
    },
    // 查看资源
    getResource(data) {
      this.$router.push("/experiment/views/experiment/newExper"); 
    },
    sizeChange(val) {
      this.pageInfo.pageSize = val;
      this.getPage();
    },
    currentChange(val) {
      this.pageInfo.currentPage = val;
      this.getPage();
    },
  },
  created() {},
};
</script>
<style >
</style>